<template>
  <div style="display: flex; align-items: center">
    <template v-if="type == 'table'">
      <div class="czr-button-table __hover">{{ title }}</div>
    </template>
    <template v-else-if="type == 'table-del'">
      <div class="czr-button-table _del __hover">{{ title || '删除' }}</div>
    </template>
    <template v-else-if="type == 'export'">
      <div class="czr-button __hover">
        <SvgIcon name="czr_export" color="var(--czr-main-color)" size="12" />{{
          title || '导出'
        }}
      </div>
    </template>
    <template v-else-if="type == 'add'">
      <div class="czr-button __hover">
        <SvgIcon name="czr_add" color="var(--czr-main-color)" size="12" />{{
          title || '新增'
        }}
      </div>
    </template>
    <template v-else-if="type == 'del'">
      <div class="czr-button __hover del">
        <SvgIcon :name="icon || 'czr_del'" color="#FF5454" size="12" />{{
          title || '删除'
        }}
      </div>
    </template>
    <template v-else>
      <div class="czr-button __hover">
        <SvgIcon
          v-if="icon"
          :name="icon"
          color="var(--czr-main-color)"
          size="12"
        />{{ title }}
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'CzrButton',
})
const props = defineProps({
  type: {},
  title: {},
  icon: {},
})
</script>

<style lang="scss" scoped>
.czr-button {
  height: 28px;
  background: rgba(var(--czr-main-color-rgb), 0.1);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-weight: 400;
  font-size: 12px;
  color: var(--czr-main-color);
  line-height: 1;
  .svg-icon {
    margin-right: 4px;
  }
  &.del {
    background: rgba(255, 84, 84, 0.1);
    color: rgba(255, 84, 84, 1);
  }
}
.czr-button-table {
  font-weight: 400;
  font-size: 14px;
  color: var(--czr-main-color);
  &._del {
    color: #ff5454;
  }
}
</style>
